
<template>
    <div class="login_wrap">
    
        <div class="form_wrap">
            <div class="textcenter">
            <h1>Vue3.0+Ts+Vant</h1>
            </div>
            <van-form @submit="onSubmit">
                <van-field class="login_input" autocomplete="off" label="用户名:" v-model="user.username"
                    placeholder="请填写用户名" :rules="[{ required: true, message: '请填写用户名，任意字符' }]" />
                <van-field class="login_input" autocomplete="off" label="密  码:" v-model="user.password" type="password"
                    placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码，任意字符' }]" />
                <van-button round block type="primary" native-type="submit">
                    登 录
                </van-button>
            </van-form>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive,ref,watch } from 'vue';
import store from '../store'
import { Toast } from 'vant'
import router from '../router/index'
import { useRoute } from 'vue-router'

const route = useRoute();
const redirect =ref<string>("/");
type userInfo = {
    username: string,
    password: string,
}

const user = reactive<userInfo>({
    username: 'admin',
    password: '123456',
})

watch(route, () => {
    redirect.value = route.query&&route.query.redirect as string;
})

onMounted(() => {
    loadEnv();
})

const loadEnv = () => {
    const baseString = import.meta.env.BASE_URL as string;
    const nodeString = import.meta.env.VITE_NODE_ENV as string;
    const urlString = import.meta.env.VITE_HOST as string;
    console.log('baseString=======>', baseString);
    console.log('nodeString=======>', nodeString);
    console.log('urlString=======>', urlString);
}

const onSubmit = () => {
    store.dispatch("Login", user).then((res) => {
        //router.push({ name: "home" });
        console.log('redirect.value========',redirect.value)
        router.push({ path: redirect.value }).catch(()=>{ router.push({ name: "home" }); });
    }).catch((ex) => {
        Toast('登录失败' + ex)
    });
};

</script>
  
<style lang="scss"> 
.van-field__label{
    width: 4.2em !important;
}
.login_wrap {
    background-color:#e9f1f6;
    // background-image: url("@/assets/img/wxpay.jpg");
    position: relative;
    height: 100vh;

    .textcenter {
        position: absolute; // 绝对定位
        left: 50%;
        transform: translate(-50%, -80%);
    }

    .form_wrap {
        position: absolute;
        bottom: 0;
        width: 80%;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -20%);

        .login_input {
            background: none;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 30px;
            margin-top: 30px;
            margin-bottom: 30px;
            color: #000;
        }
    }
}
</style>
  
